//按钮改变更换颜色
// 获取导航栏ul
//引入依赖函数 
  //定义状态变量点击之后状态变量改变
require(["config"], function () {
    require(["jquery", "swiper", "artTemplate","cookie"], function ($, Swiper, template) {
        class IndexPage {
            constructor() {
                this.cart = [];
                $.cookie.json = true//自动转换cookie值
                this.Change();
                this.initSwiper();
                this.loadHotproducts();
                this.Clickproducts();
                this.search();
                this.loadCart();
                this.shopCart();
            }
            //轮播图
            initSwiper() {
                $.ajax({
                    url: "http://www.xiongmaoyouxuan.com/api/tab/1?start=0",
                    method: "GET",
                    data: {
                        type: 0
                    },
                    dataType: "json",
                    headers: {
                        'x-platform': 'pc'
                    },
                    success: resData => {
                        const {banners} = resData.data;
                        //渲染
                        const html = template("slide-template", {
                            slides: banners})
                        $(".swiper-wrapper").html(html)
                        new Swiper(".swiper-container", {
                            loop: true,
                            autoplay: {
                                disableOnInteraction: false,
                                delay:2000,
                              },
                            pagination: {
                                el: '.swiper-pagination',
                                clickable: true
                            },
                            // 如果需要前进后退按钮
                            navigation: {
                                nextEl: '.swiper-button-next',
                                prevEl: '.swiper-button-prev',
                            },
                        })
                    },
                    error:err => {
                        console.log("失败",err);
                    },
                    complete:data => {

                    }
                })
            }
            //导航栏切换
            Change() {
                $(".text-nav").on("click", ".text-nav-li", function () {
                    let index = $(this).index();
                    $(this).css("background", "#fee44e");
                    $(this).find("a").css("color", "#43240c");
                    $(".main-container main").eq(index).show();
                    $(".main-container main").eq(index).siblings().hide();
                    // 其余的兄弟去掉背景颜色 隐式迭代
                    $(this).siblings(".text-nav-li").css("background", "");
                    $(this).siblings(".text-nav-li").find("a").css("color", "#fff");
                })
                $(".content").on("mouseover", ".item-lis", function () {
                    let index = $(this).index();
                    $(".right-content").show();
                    $(".right-content div").eq(index).show();
                    $(".right-content div").eq(index).siblings().hide();
                })
                $(".content").on("mouseleave", ".item-lis", function () {
                    $(".right-content").hide();
                })
                $(".right-content").on("mouseover", function () {
                    $(".right-content").show();
                })
                $(".right-content").on("mouseleave", function () {
                    $(".right-content").hide();
                })
                $(".banner-lis").on("click","li",function(){
                    $(this).css("box-shadow","inset 0 -3px 0 -1px currentColor");
                    $(this).siblings("li").css("box-shadow","none");
                })
            }
            loadHotproducts(){
                $.ajax({
                    url:"http://www.xiongmaoyouxuan.com/api/tab/1?start=0",
                    dataType:"json",
                    success(resData){
                        // console.log(resData);
                        //构建在模板中渲染的数据
                        let products = resData.data.items.list;
                        products.length = 16;
                        const html = template("goods-template",{products})
                        $("section > ul").html(html);
                    }
                })
            }
          
            //点击查看更多之后继续渲染数据且按钮消失
            Clickproducts(){
                $(".choice-moreBtn").on("click",function(){
                    $(".choice-more").hide();
                    $("main").append("<section><ul></ul></section>")
                    $.ajax({
                        url:"http://www.xiongmaoyouxuan.com/api/tab/1/feeds?start=20&sort=0",
                        dataType:"json",
                        success(resData){
                            //构建在模板中渲染的数据
                            let products = resData.data.list;
                            products.length = 16;
                            const html = template("goods-template",{products})
                            $("main section:eq(1) > ul").html(html);
                        }
                        
                })
                let index = 40
                $(window).scroll(function(){
                    　　let scrollTop = $(this).scrollTop();
                    　　let scrollHeight = $(document).height();
                    　　let windowHeight = $(this).height();
                    　　if(scrollHeight-scrollTop-windowHeight <=50&&(index<=1280)){
                        $("main").append("<section><ul></ul></section>")
                        $.ajax({
                            url:`http://www.xiongmaoyouxuan.com/api/tab/1/feeds?start=${index}&sort=0`,
                            dataType:"json",
                            success(resData){
                                // console.log(resData);
                                //构建在模板中渲染的数据
                                let products = resData.data.list;
                                products.length = 16;
                                const html = template("goods-template",{products})
                                $("main section:last > ul").html(html);
                                index += 20
                            }
                    })
                    　　}
                    });
            })
            }
            search(){
                //获得按钮添加事件
                $(".searchBtn").on("click",function(){
                    //获取搜索框内的内容
                   let key = $(".info").val();
                   $(".main-container main").eq(4).show();
                   $(".main-container main").eq(4).siblings().hide();
                   $.ajax({
                       url:`http://www.xiongmaoyouxuan.com/api/search?word=${key}&start=0&sort=0&couponOnly=0&minPrice=0&maxPrice=0`,
                       dataType:"json",
                       success(resData){
                           console.log(resData);
                           let products = resData.data.list;
                           const html = template("goods-template",{products})
                           $(".main-container main:eq(4)>section >ul").html(html);
                       }
                   })
                })
            }
            loadCart(){
                this.cart = $.cookie("cart") || []
            }
            //购物车按钮中的数据
            shopCart(){
                const len = this.cart.length;
                console.log(len);
                $(".cart-num").html(len);
            }
        }
        new IndexPage();
    })
})